import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button, Modal, Form} from 'antd';
import {WeaTop, WeaRightMenu, WeaTab, WeaSearchGroup, WeaInput, WeaSelect, WeaTools, WeaLocaleProvider} from 'ecCom';
import {WeaSwitch} from 'comsMobx'
import {observable, action, extendObservable, isObservable, toJS} from 'mobx';

// import  { WeaTable } from '../../../coms/wea-table';
import {WeaTableNew} from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

import * as workplanUtil from '../util/workplanUtil';
import WorkPlanCreate from '../public/workPlanCreate/index';
import { filterBR } from '../util/util';

import allStore from '../stores';
import mobx from 'mobx';

const getKey = WeaTools.getKey;
const confirm = Modal.confirm;

// @inject('comsWeaTableStore')
@inject('workPlanSearchStore')
@observer
class WorkPlanSearch extends React.Component {

  constructor() {
    super();
    //不知道为什么getNewColumns的this指向会指向window
    // this.getNewColumns = this.getNewColumns.bind(this);
  }

  //在第一次渲染时加载表格的相关数据和初始化添加计划模板的相应表单域
  componentDidMount() {
    const {workPlanSearchStore} = this.props;
    workPlanSearchStore.initData();
    workPlanSearchStore.getCondition();
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.location && this.props.location.key !== nextProps.location.key) {
        const { workPlanSearchStore } = this.props;
        workPlanSearchStore.doSearch()
    }
  }

  componentWillUnmount(){
    const { workPlanSearchStore } = this.props;
    workPlanSearchStore.ifShowSearchAd = false;
  }

  workPlanCreateDoColse = () => {
    const {workPlanSearchStore} = this.props;

    workPlanSearchStore.closeCreateWP();
    workPlanSearchStore.doSearch();
  }

  workPlanCreateOnlyClose = () => {
    const {workPlanSearchStore} = this.props;
    workPlanSearchStore.closeCreateWP();
  }

  workPlanCreateChangeTab= (newKey) => {
    const {workPlanSearchStore} = this.props;

    workPlanSearchStore.setShowType('preview');
    workPlanSearchStore.setActiveKey(newKey);
  }

  onEnterSearch = () => {
    const {workPlanSearchStore} = this.props;
    workPlanSearchStore.doSearch();
    workPlanSearchStore.setShowSearchAd(false);
  }

  render() {
    const {workPlanSearchStore} = this.props;
    const {comsWeaTableStore, topTab, conditioninfo} = workPlanSearchStore;

    let collectParams={
      favname: getLabel(18482, '查询日程'),
      favouritetype: 5,
      objid: 0,
      importantlevel: 1,
    }
    return (
      <div className="metting-search">
        {/*<DevTools></DevTools>*/}
        <WorkPlanCreate ecId={`${this && this.props && this.props.ecId || ''}_WorkPlanCreate@g1wjg1`}
          type={workPlanSearchStore.showType}
          visible={workPlanSearchStore.ifShowCreateWP}
          doClose={this.workPlanCreateDoColse}
          onlyClose={this.workPlanCreateDoColse}
          workPlanId={workPlanSearchStore.workPlanId} //日程id
          activeKey={workPlanSearchStore.activeKey}
          changeTab={this.workPlanCreateChangeTab}
        />
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ug3omu`} datas={workplanUtil.getRightMenu(workPlanSearchStore, comsWeaTableStore, false)} collectParams={collectParams}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@i2ovke`}
            title={getLabel(18482, '查询日程')}
            loading={workPlanSearchStore.loading}
            icon={<i className='icon-coms-schedule'/>}
            iconBgcolor='#6D3CF8'
            showDropIcon={true}
            buttons={this.getTopButtons()}
            dropMenuDatas={workplanUtil.getRightMenu(workPlanSearchStore, comsWeaTableStore, false)}
            dropMenuProps={{ collectParams:collectParams}}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@rkkt01`}
              searchType={['base', 'advanced']}
              showSearchAd={workPlanSearchStore.ifShowSearchAd}
              //这里接收的是切换显隐之后相应的bool值
              setShowSearchAd={bool => {workPlanSearchStore.setShowSearchAd(bool)}}
              searchsBaseValue={workPlanSearchStore.form.getFormParams()['planname']}
              selectedKey={workPlanSearchStore.form.getFormParams().timeSag ? workPlanSearchStore.form.getFormParams().timeSag : 0}
              searchsAd={workplanUtil.getSearchs(workPlanSearchStore, this.onEnterSearch)}
              buttonsAd={workplanUtil.getTabButtonsAd(workPlanSearchStore)}
              onSearch={v => {workPlanSearchStore.doSearch()}}
              onSearchChange={v => {
                workPlanSearchStore.setFormFields({
                  planname: {value: v},
                  timeSag__begindate__enddate: {
                    value: workPlanSearchStore.form.getFormParams().timeSag
                  }
                })}
              }
              keyParam="viewcondition"  //主键
              countParam="groupid" //数量
              onChange={this.changeData.bind(this)}
              datas={topTab}
            />

            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@1v6cun`}
              sessionkey={workPlanSearchStore.dataKey}
              hasOrder={true}
              needScroll={true}
              onOperatesClick={this.onOperatesClick}
              comsWeaTableStore={comsWeaTableStore}
              getColumns={this.getNewColumns}
            />

          </WeaTop>
        </WeaRightMenu>
      </div>
    )
  };


  onOperatesClick = (record, index, operate, flag, argumentString) => {
    let workPlanSearchStore = this.props.workPlanSearchStore;
    let operateType = operate.index;
    if (operateType == 0 || operateType == 1) {
      const confirm = Modal.confirm;
      confirm({
        title: getLabel(131329, '信息确认'),
        content: (<span>{getLabel(126220, '确定要完成吗？')}</span>),
        onOk() {workPlanSearchStore.doFinish(record.ID);},
        onCancel() {}
      }) 
    } else if (operateType == 2) {
      confirm({
        title: getLabel(131329, '信息确认'),
        content: getLabel(15097, '确定要删除吗？'),
        onOk() {workPlanSearchStore.doDelete(record.ID);},
        onCancel() {}
      })

    } else if (operateType == 3) {
      workPlanSearchStore.setShowType('share');
      workPlanSearchStore.setActiveKey('1');
      workPlanSearchStore.setWorkPlanId(record.ID);
      workPlanSearchStore.openCreateWP();
    }

  }

  getNewColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { //前端元素转义
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        let name = record.IDspan.replace(/<([^<>]+)>/g, '');
        if(name) {// 过滤br
          name = filterBR(name);
        }
        return (
          newColumn.dataIndex == 'ID' ?
            <a title={name} onClick={() => {
              const {workPlanSearchStore} = this.props;
              workPlanSearchStore.setShowType('preview');
              workPlanSearchStore.setActiveKey('1');
              workPlanSearchStore.setWorkPlanId(record.ID);
              workPlanSearchStore.openCreateWP();
            }} dangerouslySetInnerHTML={{ __html: name }} style={{cursor: 'pointer'}} />
            :
            <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        )
      }
      return newColumn;
    });
    return newColumns;
  }

  getTopButtons = () => {
    const {workPlanSearchStore} = this.props;
    let {comsWeaTableStore} = workPlanSearchStore;
    comsWeaTableStore = toJS(comsWeaTableStore);
    const dataKey = workPlanSearchStore.dataKey;
    const selectedRowKeys = toJS(comsWeaTableStore.selectedRowKeys);
    const arr = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@z0isza@batchfinish`} type="primary" disabled={selectedRowKeys.length === 0 ? true : false}
                onClick={() => {this.batchfinish(...[selectedRowKeys, workPlanSearchStore]);}}>{getLabel(126174, '批量完成')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9viq7p@exportExcelAll`} type="primary" onClick={() => {workPlanSearchStore.exportExcel(dataKey)}}>{getLabel(125595, '全部导出')}</Button>),
    ];
    return arr;
  }

  batchfinish = (param) => {
    const {workPlanSearchStore} = this.props;
    const confirm = Modal.confirm;
    confirm({
      title: getLabel(131329, '信息确认'),
      content: (<span>{getLabel(126220, '确定要完成吗？')}</span>),
      onOk() {workPlanSearchStore.batchFinish(param);},
      onCancel() {}
    })
  }

  //变更Tab页
  changeData= (theKey) => {
    const {workPlanSearchStore} = this.props;
    workPlanSearchStore.setFormFields({
      timeSag__begindate__enddate: {
        value: [theKey]
      }
    });
    workPlanSearchStore.setShowSearchAd(false);
    workPlanSearchStore.setLoading(true);
    workPlanSearchStore.doSearch({
      timeSag: workPlanSearchStore.form.getFormParams().timeSag,
      CompParams: {
        viewcondition: theKey
      }
    });
  }

}

export default WorkPlanSearch;
